<script>
import fruit from "@/Fruit.vue";

export default {
  name: "fruit-item",
  props: {
    fruitName: {
      default:'myFruit',
      type:String
    },
    imgUrl: {
      default: 'https://img1.baidu.com/it/u=1818314105,4047054563&fm=253&fmt=auto&app=138&f=JPEG?w=256&h=256',
      type:String
    },
    price: {
      default:0,
      type:Number
    },
    oldPrice:{
      default:0,
      type:Number
    }
  },
  data() {
    return {
      num:0,

      price: 7,
      totalAmount:0,
    };
  },
  methods: {
    fruitDetail() {
      alert('细情页面')
    },
    buy(){
      alert('购买成功')
    },
    tuck(){
      alert('收藏成功')
    },
    minus(){
      if (this.num>1) this.num--
    },
    plus(){
      this.num++
    },
    changeTotalAmount(val, oldval){
      this.totalAmount=val*this.price
      console.log(val)
      console.log(oldval)
    }
  },
  watch:{
    num:'changeTotalAmount'
  },
  computed:{
    // totalAmount(){
    //   return this.num * this.price
    // }
  }
}
</script>

<template>
  <div class="fruit-item-box" @click="fruitDetail">
    <img src="https://img1.baidu.com/it/u=2017111140,454329493&fm=253&fmt=auto&app=138&f=JPEG?w=629&h=500">
    <div style="flex: 1">
      <div style="display: flex">
        <h3>柠檬</h3>
      </div>
      <p><del>15</del> 7</p>

      <button class="btn" @click.stop="buy">购买</button>
      <button class="btn" id="btn" @click.stop="tuck">收藏</button>
      <span>总价格：<span id="span">{{totalAmount.toFixed(1)}}</span></span>
      <div class="number-box">
        <button @click.stop="minus">-</button>
        <p>{{ num }}</p>
        <button @click.stop="plus">+</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.fruit-item-box {
  display: flex;
  padding: 20px;
  margin: 20px;
  border-radius: 10px;
  background: white;
  box-shadow: 0 0 10px 0 gray;

  img {
    width: 120px;
    height: 100px;
    //object-fit: cover;
    margin: auto;
    padding: 0 15px 0 0;
  }
}

#btn {
  border: 2px solid #ff9900;
}
.btn {
  margin-right: 15px;
  background: none;
  border: 2px solid #2c9d00;
  border-radius: 5px;
}

.number-box {
  display: flex;
  float: right;


  button { /* 添加或去掉购物车 */
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: none;
    margin: 0;
    padding: 0;
    border: 2px solid #ff9900;
  }

  p {
    padding: 0 10px;
    margin: 0;
  }
}

#span{
  color: #2c9d00;
}
</style>